<template>
  <!-- 汇总信息组件 -->
  <div class="sum-wrapper">
    <div class="sum-card" v-for="(key,index) in Object.keys(labelMap)" :key="index">
      <div :class="['sum-item',`sum-item-${index+1}`]">
        <div class="value">{{sumInfo[key] || 0}}</div>
        <div class="label">{{labelMap[key]}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    labelMap: {
      type: Object,
      default: () => ({})
    },
    sumInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return {

    }
  }
}
</script>
<style lang="less" scoped>
.sum-wrapper{
  display: flex;
  flex-flow: wrap;
  margin: 10px 0 10px;
  .sum-card{
    width: 249px;
    height: 112px;
    padding: 20px 20px;
    box-sizing: border-box;
    margin:0 13px 10px 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px 0px #F2F4F8;
    border-radius: 8px;
  }
  .sum-item{
    height: 50px;
    padding-left: 10px;
    .value{
      font-size:26px;
      font-weight:bold;
      margin-bottom: 5px;
    }
    .label{
      width: 150px;
      font-size:14px;
    }
  }
  .sum-item-1{
    border-left: 4px solid #BA461F;
  }
  .sum-item-2{
    border-left: 4px solid #E0BB42;
  }
  .sum-item-3{
    border-left: 4px solid #357AC3;
  }
  .sum-item-4{
    border-left: 4px solid #8D1BC2;
  }
  .sum-item-5{
    border-left: 4px solid #F57144;
  }
  .sum-item-6{
    border-left: 4px solid #7578B4;
  }
  .sum-item-7{
    border-left: 4px solid #E93341;
  }
  .sum-item-8{
    border-left: 4px solid #ADC83F;
  }
}
</style>